<template>
  <div>
    <div class="addUser">
      <!-- <el-button type="primary">添加用户</el-button> -->
      <el-button type="primary" @click="addUser()">添加用户</el-button>
      <!-- 表单提交开始 -->
      <el-dialog :title="edit" :visible.sync="dialogFormVisible" width="40%">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="user">
            <el-input v-model="ruleForm.user" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model.number="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="职称" prop="job">
            <el-input v-model.number="ruleForm.job"></el-input>
          </el-form-item>
          <el-form-item label="权限选择" prop="power">
            <el-select v-model="ruleForm.power" placeholder="请选择用户权限">
              <el-option label="超级管理员" value="shanghai"></el-option>
              <el-option label="财务" value="beijing"></el-option>
              <el-option label="采购" value="beijing"></el-option>
              <el-option label="仓库管理员" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{sureSub}}</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 表单提交结束 -->
    <el-table :data="tableData" style="width: 100%" border="" fit highlight-current-row>
      <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="job" label="职称" align="center" width="300"></el-table-column>
      <el-table-column prop="user" label="用户账号" align="center" width="300"></el-table-column>
      <el-table-column prop="power" label="权限" align="center" width="400"></el-table-column>
      <el-table-column prop="edit" label="编辑" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editUser(scope.row.id,scope.row)"
          ></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delUser(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    // var checkAge = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('年龄不能为空'))
    //   }
    //   setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error("请输入数字值"));
    //     } else {
    //       if (value < 18) {
    //         callback(new Error("必须年满18岁"));
    //       } else {
    //         callback();
    //       }
    //     }
    //   }, 1000);
    // };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      sureSub: "",
      edit: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      tableData: [
        {
          id: "1",
          name: "吕敬 ",
          pass: "",
          job: "采购",
          power: "采购",
          user: "lvjing"
        },
        {
          id: "2",
          name: "吕敬",
          pass: "",
          job: "仓管",
          power: "仓库管理员"
        },
        {
          id: "3",
          name: "吕敬",
          pass: "",
          job: "总经理",
          power: "超级管理员"
        },
        {
          id: "4",
          name: "吕敬",
          user: "12456",
          pass: "",
          job: "财务",
          power: "超级管理员"
        }
      ],
      ruleForm: {
        pass: "",
        job: "",
        checkPass: "",
        user: "",
        name: "",
        power: ""
      },
      rules: {
        pass: [{ validator: validatePass, required: true, trigger: "blur" }],
        checkPass: [
          { validator: validatePass2, required: true, trigger: "blur" }
        ],
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 12, message: "长度在 4到 12个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2到 6个字符", trigger: "blur" }
        ],
        power: [{ required: true, message: "请选择权限类型", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      //this.$refs[formName].resetFields()
      this.ruleForm = {
        pass: "",
        job: "",
        checkPass: "",
        user: "",
        name: "",
        power: ""
      }
    },
    addUser() {
      this.dialogFormVisible = true;
      this.edit = "添加用户";
      this.sureSub = "确认添加";
      this.resetForm();
    },
    editUser(i, info) {
      this.dialogFormVisible = true;
      this.edit = "修改用户";
      this.sureSub = "确认修改";
      // this.ruleForm
      console.log(info);
      this.ruleForm = info;
    },
    delUser(id) {
      console.log(id)
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    }
  }
}
</script>

<style lang='scss'>
.addUser {
  margin-bottom: 20px !important;
}
</style>
